import React, {Component} from 'react';
import PropTypes from 'prop-types'
import './InputItem.scss'

class InputItem extends Component{
    constructor(props){
        super(props)
    }
    render(){
        if(this.props.type=='text'){
            //输入框
            return (
                <div className="inputItem">
                    <label>{this.props.cap}</label>
                    <input 
                        type="text" 
                        name={this.props.name}
                        placeholder={this.props.placeholder} 
                        value={this.props.value} 
                        onChange={this.props.handleChange}
                    />
                </div>
            )
        }else if(this.props.type=='radio'){
            //单选框
            return (
                <div className="inputItem">
                    <label>{this.props.cap}</label>
                    <label className="checkSex">
                        <input type="radio" value="1" name={this.props.name} onChange={this.props.handleChange}/> 男
                    </label>
                    <label className="checkSex">
                        <input type="radio" value="0" name={this.props.name} onChange={this.props.handleChange} /> 女
                    </label>
                </div>
            )
        }else if(this.props.type=='file'){
            //文件上传
            return (
                <div className="inputItem">
                    <label>{this.props.cap}</label>
                    <div className="uploadFile">
                        <label>
                            <input type="file" name={this.props.name} onChange={this.props.handleUpload} />
                        </label>
                    </div>
                </div>
            )
        }else if(this.props.type=='button'){
            //按钮
            return (
                <div className="btn" onClick={this.props.handleSubmit}>
                    {this.props.cap}
                </div>
            )
        }
    }
}

InputItem.propTypes = {
    cap: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    placeholder: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
}
InputItem.defaultProps = {
    type: 'text',
    value: ''
}

export default InputItem;
